<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    @handleOk="handleOk" @handleCancle="handleCancle" class="review_modal">
    <template v-slot:body>
      <div class="reviewBox">
        <a-form name="advanced_search" autoComplete="off" class="ant-advanced-search-form" :model="formState"
          ref="workFlowFrom">
          <a-form-item label="审核流程标题" name="name" :rules="[{ required: true, message: '请填写审核流程标题!' }]">
            <a-input v-model:value="formState.name" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="最终审核通过后是否自动发布">
            <a-switch size="small" v-model:checked="formState.isAutoPublish"></a-switch>
          </a-form-item>
          <a-form-item label="流程" v-if="resData.auditNodes.length">
            <div class="timelineBox" v-for="(item, index) in resData.auditNodes">
              <div class="timeline">
                <span class="dian"></span>
                <span class="title">{{ item.nodeName }}</span>
              </div>
              <div class="personnelBox">
                <div class="shry">
                  <span v-if="item.auditorData && item.auditorData.length > 0">已选{{ item.auditorData.length }}人审核</span>
                  <span v-if="item.auditUsers?.length && !(item.auditorData && item.auditorData.length > 0)">选择审核人员</span>
                </div>
                <div class="personnel">
                  <i class="iconfont icon-Add" @click="addAuditor(item, index)" v-if="item.auditUsers?.length"></i>
                  <div class="tn" v-for="(data, index1) in item?.auditorData">
                    <div class="imgs">
                      <i class="iconfont" @click="deleteClick(index, index1)">&#xe93d;</i>
                      <img :src="data.url" alt="" />
                    </div>
                    <span>{{ data.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </template>
  </base-modal>
  <base-modal :ref="modAlProps.width" :isVisible="isauditorVisible" :title="modAlProps.title" :buttons="buttons1"
    @handleOk="auditorOk" @handleCancle="auditorCancle" class="auditor_modal">
    <template v-slot:body>
      <div class="auditorBox">
        <div class="tn" v-for="item in auditUsers">
          <img :src="item.url" alt="" />
          <a-checkbox v-model:checked="item.checked">
            <span>{{ item.name }}</span>
          </a-checkbox>
        </div>
      </div>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, defineComponent, watch } from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import treeTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/contentManageColumn";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { scrollType } from "@/type.d";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
import { number } from "echarts";
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  contentId: {
    type: Number,
    default: null,
  },
});
const resData = ref<dataSourceType>({
  auditNodes: [
    {
      auditorData: [],
    },
  ],
});

//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "M",
  title: "提交审核",
});
const modAlProps1 = reactive<dataSourceType>({
  width: "S",
  title: "选择审核人",
});
const workFlowFrom = ref();
const formState = ref<dataSourceType>({ isAutoPublish: false });
const auditUsers = ref<dataSourceType>([]);

const auditorIndex = ref();
let isauditorVisible = ref(false); //控制是否展示审核人对话框
//模态框button按钮个数和文案修改

let buttons = ref<dataSourceType[]>([
  {
    text: "提交",
    "html-type": "submit",
  },
]);
let buttons1 = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
  },
]);

let scroll: scrollType = reactive({ y: "", isFixed: false });
// 打开审核人弹窗
const addAuditor = (item: any, index: any) => {
  isauditorVisible.value = true;
  auditUsers.value = item.auditUsers;
  auditorIndex.value = index;
  resData.value.auditNodes[index].auditorData = [];
};
// 确定选择审核人员
const auditorOk = (e: MouseEvent) => {
  isauditorVisible.value = false;
  auditUsers.value.map((item: any) => {
    if (item.checked) {
      resData.value.auditNodes[auditorIndex.value].auditorData.push(item);
    }
  });
};
const deleteClick = (index: any, index1: any) => {
  resData.value.auditNodes[index].auditorData.splice(index1, 1);
};
const auditorCancle = (e: MouseEvent) => {
  isauditorVisible.value = false;
};
// 待发布
const waitRecord = () => { };
// 操作记录
const operatingRecord = () => { };
// 内容版本
const versionRecord = () => { };
// 删除
const deleteRecord = () => { };
const emits = defineEmits(["handleOk", "handleCancle"]);
const handleOk = () => {
  workFlowFrom.value
    .validate()
    .then(() => {
      let params = {
        name: formState.value.name,
        flowId: resData.value.workflowId,
        isAutoPublish: formState.value.isAutoPublish,
        auditUsers: resData.value.auditNodes.map((item: any) => {
          return {
            nodeId: item.nodeId,
            userIds: item.auditUsers?.map((data: any) => data.id),
          };
        }),
      };
      emits("handleOk", params);
    })

};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
const fetchAddContentWorkflow = async () => {
  let data = await request.fetchAddContentWorkflow({ id: props.contentId });
  resData.value = data;
};
onMounted(async () => {
  fetchAddContentWorkflow();
});
</script>

<style lang="less" scoped>
.review_modal {
  .timelineBox {
    .timeline {
      display: flex;
      align-items: center;

      .dian {
        width: 10px;
        height: 10px;
        border-radius: 50%;

        background: #1f6ded;
      }

      .title {
        margin-left: 12px;
        width: 126px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
    }

    .personnelBox {
      padding-top: 8px;
      padding-bottom: 24px;
      margin-left: 5px;
      padding-left: 16px;
      border-left: 1px solid #1f6ded;

      .shry {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }

      .personnel {
        padding-top: 8px;

        .icon-Add {
          width: 24px;
          height: 24px;
          display: inline-block;
          text-align: center;
          line-height: 20px;
          font-size: 20px;
          border: 1px dashed rgba(0, 0, 0, 0.15);

          &:hover {
            color: #4892fa;
          }
        }

        display: flex;

        .imgs {
          position: relative;

          .icon-delete {
            position: absolute;
            top: 0;
            left: -12px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.07);
            display: none;
          }
        }

        .imgs:hover {
          .icon-delete {
            display: block;
          }
        }
      }
    }
  }

  .timelineBox:last-child {
    .personnelBox {
      padding-bottom: 0;
      border-left: 0;
    }
  }
}

::v-deep(.ant-form-item-label) {
  width: 196px;
}

.tn {
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  span {
    margin-top: 8px;
    display: inline-block;
    width: 42px;
    height: 14px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.auditorBox {
  display: flex;

  .tn {
    margin-left: 0;
    margin-right: 24px;
  }
}
</style>
<style lang="less">
.review_modal {
  .reviewBox .ant-form-item:nth-last-type(1) {
    margin-bottom: 0px;
  }
}
</style>
